<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>立即订购</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../font/iconfont/iconfont.css">
    <link rel="stylesheet" href="../font/iconfont/iconfont.ttf">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/orderNow.css">
    <style></style>
</head>
<body>
<!--收藏-->
<div class="collection_box">
    <div class="collection_content">
        <div class="close_collection_box icon-font icon-delete2circlecoloring" id="closeCollection" onclick="closeCollection()"></div>
        <div class="collection_info">
            <div class="collection_info_title">
                <div class="collection_tip_icon icon-font icon-tishi2"></div>
                <div class="collection_tip_title">
                    <div class="title_zh">收藏成功，您可以在收藏夹中查看该商品</div>
                    <div class="title_en">Collection success, you can view this product in the favorites</div>
                </div>
            </div>
            <div class="collection_info_cont">
                <div class="collection_img">
                    <img src="../image/shopImg/shop1.png" alt="">
                </div>
                <div class="collection_name">
                    <div class="title_zh">这里是商品名</div>
                    <div class="title_en">Here is the name of the goods</div>
                </div>
            </div>
        </div>
        <div class="collection_bottom_bar">
            <div class="collection_btn">
                <div class="title_zh">确认</div>
                <div class="title_en">confirm</div>
            </div>
        </div>
    </div>
</div>
<div class="header">
    <div class="header_container">
        <div class="user_name">
            <div class="title_zh">这里是用户名</div>
            <div class="title_en">username</div>
        </div>
        <div class="header_nav">
            <ul>
                <li>
                    <a href="#">
                        <div class="title_zh">首页</div>
                        <div class="title_en">Home</div>
                    </a>
                </li>
                <li  class="active">
                    <a href="#">
                        <div class="title_zh">购货车</div>
                        <div class="title_en">Purchase</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="title_zh">收藏夹</div>
                        <div class="title_en">Collection</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="title_zh">联系客服</div>
                        <div class="title_en">Mine</div>
                    </a>
                </li>
                <li class="shop_search">
                    <div class="icon-font icon-search"></div>
                </li>
            </ul>
        </div>
        <!--搜索-->
        <div class="search_box">
            <input type="text" class="" placeholder="请输入搜索内容/Enter the search content">
            <div class="search_btn">
                <div class="title_zh">搜索</div>
                <div class="title_en">Search for</div>
            </div>
        </div>
    </div>
</div>
<div class="content">
    <div class="content_header">
        <div class="logo">
            <img src="" alt="">
        </div>
        <div class="page_title">
            <div class="title_zh">立即订购</div>
            <div class="title_en">order now</div>
        </div>
    </div>
    <div class="content_title">
        <div class="title_zh">确认订单信息</div>
        <div class="title_en">order information</div>
    </div>
    <div class="order_list_content">
        <div class="cartMain_hd">
            <ul class="order_col cartTop">
                <li class="list_con">
                    <div class="title_zh">商品信息</div>
                    <div class="title_en">good name</div>
                </li>
                <li class="list_price">
                    <div class="title_zh">单价</div>
                    <div class="title_en">unit price</div>
                </li>
                <li class="list_info">
                    <div class="title_zh">商品规格</div>
                    <div class="title_en">Settlement</div>
                </li>
                <li class="list_amount">
                    <div class="title_zh">数量</div>
                    <div class="title_en">Quantity</div>
                </li>
                <li class="list_discount">
                    <div class="title_zh">优惠</div>
                    <div class="title_en">Discount</div>
                </li>
                <li class="list_sum">
                    <div class="title_zh">增值税</div>
                    <div class="title_en">VAT</div>
                </li>
                <li class="list_op">
                    <div class="title_zh">小计</div>
                    <div class="title_en">Subtotal</div>
                </li>
            </ul>
        </div>
        <div class="cartBox">
            <div class="shop_info">
                <div class="shop_name">
                    <a href="javascript:;">
                        <div class="title_zh">这里是店铺名称</div>
                        <div class="title_en">shop name</div>
                    </a>
                </div>
            </div>
            <div class="order_content">
                <ul class="order_col">
                    <li class="list_con">
                        <div class="list_img"><a href="javascript:;"><img src="../image/shopImg/shop1.png" alt=""></a></div>
                        <div class="list_text"><a href="javascript:;">这里是商品信息</a></div>
                    </li>
                    <li class="list_info">
                        <div class="order_quantity">
                            <span>20kg</span>
                        </div>
                    </li>
                    <li class="list_price">
                        <div class="unit_price">
                            <p class="price">256/kg</p>
                        </div>
                    </li>
                    <li class="list_amount">
                        <div class="amount_box">
                            <span>1</span>
                        </div>
                    </li>
                    <li class="list_discount">
                        <div class="discount_value">--</div>
                    </li>
                    <li class="list_sum">
                        <div class="sum_value">
                            <em>￡</em>
                            <span>100.00</span>
                        </div>
                    </li>
                    <li class="list_op">
                        <div class="subtotal">
                            <em>￡</em>
                            <span>256.00</span>
                        </div>
                    </li>
                </ul>
                <div class="buyer_message_box">
                    <div class="buyer_message_title">
                        <div class="title_zh">买家留言</div>
                        <div class="title_en">Buyer message</div>
                    </div>
                    <div class="buyer_message_content">这里是买家留言内容</div>
                </div>
            </div>
        </div>
    </div>
    <!--订单信息-->
    <div class="order_info_container">
        <div class="order_info_left">
            <div class="info_col">
                <div class="order_info_title">
                    <div class="title_zh">收货地址：</div>
                    <div class="title_en">Shipping address:</div>
                </div>
                <div class="order_info_content">
                    <div class="title_zh">这里是收货地址</div>
                    <div class="title_en">Shipping address</div>
                </div>
            </div>
            <div class="info_col">
                <div class="order_info_title">
                    <div class="title_zh">收货电话：</div>
                    <div class="title_en">Receiving phone：</div>
                </div>
                <div class="order_info_content">
                    <div class="title_zh">这里是收货电话</div>
                    <div class="title_en">Shipping address</div>
                </div>
            </div>
            <div class="info_col">
                <div class="order_info_title">
                    <div class="title_zh">送货日期：</div>
                    <div class="title_en">date:</div>
                </div>
                <div class="order_info_content">
                    <p>2018-01-20</p>
                </div>
            </div>
        </div>
        <div class="order_info_right">
            <div class="order_body">
                <div class="body_title">
                    <div class="title_zh">总增值税</div>
                    <div class="title_en">Total VAT</div>
                </div>
                <div class="body_cont">
                    <em>￡</em>
                    <span>100.00</span>
                </div>
            </div>
            <div class="order_body">
                <div class="body_title">
                    <div class="title_zh">收取总额</div>
                    <div class="title_en">Grand total</div>
                </div>
                <div class="body_cont">
                    <em>￡</em>
                    <span>356.00</span>
                </div>
            </div>
        </div>
        <div class="order_btn_box">
            <div class="submit_order_btn">
                <div class="title_zh">确认订单</div>
                <div class="title_en">Confirm order</div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/common.js"></script>
<script>
    $(function() {
        bannerInit();
    });
    var ident = false;
    $('.shop_search').click(function () {
        if( false == ident){
            $('.search_box').show();
            ident = true;
        }else {
            $('.search_box').hide();
            ident = false;
        }
    })

    function openCollection() {
        $('.collection_box').show();
    }
    function closeCollection() {
        $('.collection_box').hide();
    }
</script>
</html>